import React from 'react';
import ReactEcharts from 'echarts-for-react';

class GaugeComponent extends React.Component {
    constructor() {
        super();
        const option = {
            backgroundColor: '#1b1b1b',
            tooltip: {
                formatter: '{a} <br/>{c} {b}',
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            series: [
                {
                    name: '速度',
                    type: 'gauge',
                    min: 0,
                    max: 220,
                    splitNumber: 11,
                    radius: '50%',
                    axisLine: {
                        // 坐标轴线
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: [
                                [0.09, 'lime'],
                                [0.82, '#1e90ff'],
                                [1, '#ff4500'],
                            ],
                            width: 3,
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    axisLabel: {
                        // 坐标轴小标记
                        textStyle: {
                            // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    axisTick: {
                        // 坐标轴小标记
                        length: 15, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    splitLine: {
                        // 分隔线
                        length: 25, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    pointer: {
                        // 分隔线
                        shadowColor: '#fff', // 默认透明
                        shadowBlur: 5,
                    },
                    title: {
                        textStyle: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic',
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    detail: {
                        backgroundColor: 'rgba(30,144,255,0.8)',
                        borderWidth: 1,
                        borderColor: '#fff',
                        shadowColor: '#fff', // 默认透明
                        shadowBlur: 5,
                        offsetCenter: [0, '50%'], // x, y，单位px
                        textStyle: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#fff',
                        },
                    },
                    data: [{ value: 40, name: 'km/h' }],
                },
                {
                    name: '转速',
                    type: 'gauge',
                    center: ['25%', '55%'], // 默认全局居中
                    radius: '30%',
                    min: 0,
                    max: 7,
                    endAngle: 45,
                    splitNumber: 7,
                    axisLine: {
                        // 坐标轴线
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: [
                                [0.29, 'lime'],
                                [0.86, '#1e90ff'],
                                [1, '#ff4500'],
                            ],
                            width: 2,
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    axisLabel: {
                        // 坐标轴小标记
                        textStyle: {
                            // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    axisTick: {
                        // 坐标轴小标记
                        length: 12, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    splitLine: {
                        // 分隔线
                        length: 20, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    pointer: {
                        width: 5,
                        shadowColor: '#fff', // 默认透明
                        shadowBlur: 5,
                    },
                    title: {
                        offsetCenter: [0, '-30%'], // x, y，单位px
                        textStyle: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontStyle: 'italic',
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    detail: {
                        // backgroundColor: 'rgba(30,144,255,0.8)',
                        // borderWidth: 1,
                        borderColor: '#fff',
                        shadowColor: '#fff', // 默认透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [25, '20%'], // x, y，单位px
                        textStyle: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#fff',
                        },
                    },
                    data: [{ value: 1.5, name: 'x1000 r/min' }],
                },
                {
                    name: '油表',
                    type: 'gauge',
                    center: ['75%', '50%'], // 默认全局居中
                    radius: '30%',
                    min: 0,
                    max: 2,
                    startAngle: 135,
                    endAngle: 45,
                    splitNumber: 2,
                    axisLine: {
                        // 坐标轴线
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: [
                                [0.2, 'lime'],
                                [0.8, '#1e90ff'],
                                [1, '#ff4500'],
                            ],
                            width: 2,
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    axisTick: {
                        // 坐标轴小标记
                        length: 12, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                        formatter(v) {
                            switch (`${v}`) {
                                case '0':
                                    return 'E';
                                case '1':
                                    return 'Gas';
                                case '2':
                                    return 'F';
                                default:
                                    return null;
                            }
                        },
                    },
                    splitLine: {
                        // 分隔线
                        length: 15, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', // 默认透明
                        shadowBlur: 5,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [{ value: 0.5, name: 'gas' }],
                },
                {
                    name: '水表',
                    type: 'gauge',
                    center: ['75%', '50%'], // 默认全局居中
                    radius: '30%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: {
                        // 坐标轴线
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: [
                                [0.2, 'lime'],
                                [0.8, '#1e90ff'],
                                [1, '#ff4500'],
                            ],
                            width: 2,
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    axisTick: {
                        // 坐标轴小标记
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                        formatter(v) {
                            switch (`${v}`) {
                                case '0':
                                    return 'H';
                                case '1':
                                    return 'Water';
                                case '2':
                                    return 'C';
                                default:
                                    return null;
                            }
                        },
                    },
                    splitLine: {
                        // 分隔线
                        length: 15, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 10,
                        },
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', // 默认透明
                        shadowBlur: 5,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [{ value: 0.5, name: 'gas' }],
                },
            ],
        };
        this.state = {
            option,
        };
    }

    componentDidMount() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
        this.timeTicket = setInterval(() => {
            let { option } = this.state;
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
            option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
            option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
            this.setState({ option });
        }, 1000);
    }

    componentWillUnmount() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
    }

    render() {
        return (
            <div className="examples">
                <div className="parent">
                    <label> render a car gauge chart. </label>
                    <ReactEcharts
                        option={this.state.option}
                        style={{ height: '500px', width: '100%' }}
                        className="react_for_echarts"
                    />
                </div>
            </div>
        );
    }
}

export default GaugeComponent;
